<template>
  <div class="about">
    <div class="nav">
        <h1>个人中心</h1>
    </div>
    <div class="order">
      <h2>购买记录</h2>
      <ul>
        <li v-for="item in ticket" :key="item.orderTime">
          <order-list :item="item"></order-list>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import OrderList from '@/components/OrderList.vue';

export default {
  data(){
    return{
    }
  },
  methods: {
  },
  computed:{
    ...mapState(['ticket']),
  },
  components: {
    OrderList
  },
}
</script>

<style lang="less" scoped>
.about{
  .nav{
        background-color: #e54847;
        padding: 6px;
        height: 38px;
        line-height: 38px;
        color: #fff;
        text-align: center;
        font-size: 18px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        position: relative;

        .back{
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);

            i{
                font-size: 20px;
            }
        }
    }
}
</style>